<template>
  <div class="gltfmodel_data">
    <div>表格</div>
    <div class="tip">该功能需等面板功能开放后才能使用</div>
    <ProPanel :groups="groups">
      <template #add>
        <div class="add">
          <div>
            <SvgIcon icon-class="ic_加号" />
          </div>
        </div>
      </template>
      <template #tip>
        <div class="api_tip">获取资源列表接口（无条件查询）</div>
      </template>
      <template #send>
        <el-button type="primary" class="send">发送</el-button>
      </template>
    </ProPanel>
  </div>
</template>

<script lang="ts" setup>
import ProPanel from '@/components/pro-panel/index.vue';
import dataResource from './groups/dataResource';
import refresh from './groups/refresh';

const groups = computed(() => {
  return [dataResource, refresh];
});
</script>

<style lang="less" scoped>
.gltfmodel_data {
  .tip {
    font-size: 12px;
    margin-top: 8px;
    color: grey;
  }

  .api_tip {
    font-size: 12px;
    color: grey;
    margin: -10px 0;
  }

  .add {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    > div {
      width: 32px;
      height: 32px;
      background: #545454;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;

      .svg-icon {
        font-size: 22px;
      }
    }
  }

  .send {
    width: 48px;
    margin: auto;
  }

  :deep(.el-switch) {
    transform: translate(220px, -14px);
    position: absolute;
  }

  :deep(.el-textarea.is-disabled .el-textarea__inner),
  :deep(.el-input.is-disabled .el-input__wrapper) {
    background: #414141;
  }
}
</style>
